<html>
	<head>
		<title>Catanica</title>
		<link type="text/css" rel="stylesheet" href="css/catan.css" /> 
	</head>
	<body>
		<div id='main'>
			<h3>Catanica</h3>
			<div id='turn'></div>
			<div id='game'>
			</div>
			<div id="chatarea">
				<div id="chatbox" class="chatbox">
				</div>
				<div id="playerlist" class="playerlist">
					<h5>who's online:</h5>
				</div>
				<div id="chat">
					<table>
						<tbody>
  					  	<tr>
    							<td style="padding-right:10px;"><input class="chatinput" name="chatinput" type="text" id="input"></td>
    							<td style="width:50px;padding-right:10px;"><input id="input" type="button" value="Send" onClick="sendMessage()"/></td>
  					  	</tr>
  				  		</tbody>
  					</table>
  				</div>
			</div>
			<div id="cards">
				<div class="card card-grain"></div>
				<div class="card card-forest"/></div>
				<div class="card card-brick"></div>
				<div class="card card-ore"></div>
				<div class="card card-sheep"></div>
			</div>
			<div id='info-actions'>
				<h3>Actions</h3>
				<p>
				<div class='actions'>
					<p class='helptext'>Hover over a button to find out the cost of an item</p> 
					<div class='input_action disabled_action' id='buyroad' title='Cost: 1 Brick, 1 Wood'>Buy Road</div>
					<div class='input_action disabled_action' id='buysettlement' title='Cost: 1 Brick, 1 Wood, 1 Sheep, 1 Grain'>Buy Settlement</div>
					<div class='input_action disabled_action' id='buycity' title='Cost: 3 Grain, 2 Ore'>Buy City</div>
				</div>
				</p>
				<p>
				<div class='actions'>
					<div class='cancel_action disabled_action' id='cancelpurchase'>Cancel Purchase</div>
					<div class='cancel_action input_action enabled_action' id='endturn'>End Turn</div>
				</div>
				</p>
			</div>
		</div>
		<div id='bottom'>	
			<div id='debug'>
				Debug Console<br/>
				-------------------------
			</div>
			<div id='instructions'>
				<h3>Instructions:</h3>
			</div>
		</div>


		<script src='js/jquery-1.4.2.min.js'></script>
		<script src='js/jquery.tooltip.min.js'></script>
		<script src='js/jquery.dimensions.min.js'></script>
		<script src='js/catan.js'></script>
		<script src='js/display.js'></script>
		<script src='js/canvas.js'></script>
		<script src='js/server.js'></script>
		<script src='js/client.js'></script>
		<script src='js/display.js'></script>
		<script src='js/game.js'></script>
		<script src='js/main.js'></script>
		
		<script type="text/javascript">
			displayBoard();
			$('#main').mousemove(handleMouseMove);
			$('#main').mouseup(handleMouseUp);
			$('#buysettlement').mouseup(function() { buyItem(0) });
			$('#buycity').mouseup(function(){ buyItem(1) });
			$('#buyroad').mouseup(function(){ buyItem(2) });
			$('#cancelpurchase').mouseup(cancelPurchase);
			$('#endturn').mouseup(endTurn);
		</script>
		
	</body>
</html>
